<template>
	<view class="my">
		<div class="my_top">
			<div class="my_avatar" @click="uploadImg">
				<image class="my_avatar_icon" v-if="myAvatar" :src="myAvatar" alt="" mode="aspectFill"></image>
				<template v-else>
					<span class="my_icon_camera iconfont icon-xiangji"></span>
					<div class="upload_img">上传头像</div>
				</template>
			</div>
			
			<div class="my_reg">
				<div class="regist">注册/登录</div>
				<div class="regist_sb">登录后即可体验更多服务</div>
			</div>
		</div>
		<div class="my_info">
			<div class="my_info_item" v-for="item in myInfo" :key="item.id" @click="jump(item)">
				<div class="info_num">{{ item.num }}</div>
				<div class="info_text">{{ item.name }}</div>
			</div>
		</div>
		<div class="open_vip">
			<div class="open_vip_tip">
				<div class="vip_tips">尚未开通会员</div>
				<div class="vip_tips_sub">会员权益:牵线,享受月老牵线服务</div>
			</div>
			<div class="vip_btn">
				<div class="open_txt">开通<br/>服务</div>
			</div>
		</div>
		<div class="info_verify">
			<div class="verify_title">信息认证</div>
			<div class="verify_list">
				<div class="verify_item" v-for="item in verifyList" :key="item.id" @click="confirmVerify(item.id)">
					<div class="verify_icon">
						<div class="verify_iconfont_box">
							<span :class="['verify_iconfont','iconfont',`icon-${item.icon}`]"></span>
						</div>
					</div>
					<div class="verify_name">{{ item.name }}</div>
				</div>
			</div>
		</div>
		<div class="my_info_box">
			<div class="info_item" v-for="item in mainInfo" :key="item.id" @click="go(item.id)">
				<span :class="['info_item_mark','iconfont',`icon-${item.icon}`]"></span>
				<div class="info_item_main">
					<div class="info_item_txt">{{ item.name }}</div>
					<van-icon  name="arrow" />
				</div>
			</div>
		</div>
		<div class="my_wish">
			愿有情人终成眷属,早日脱单.
		</div>
	</view>
</template>

<script>
		export default {
		data() {
			return {
				myInfo:[
					{id:0,name:'我的关注',num:0},
					{id:1,name:'关注我的',num:0},
					{id:2,name:'谁看过我',num:0},
					{id:3,name:'我看过谁',num:0},
				],
				verifyList:[
					{id:0,name:'实名认证',icon:'shimingrenzheng1'},
					{id:1,name:'学历认证',icon:'xuelirenzheng'},
					{id:2,name:'车认证',icon:'cheliangrenzheng'},
					{id:3,name:'房认证',icon:'fangwurenzheng'},
				],
				mainInfo:[
					{id:0,name:'编辑资料',icon:'jilu'},
					{id:1,name:'择偶条件',icon:'_hunqianzeou'},
					{id:3,name:'我的相册',icon:'xingzhuang-tupian'},
					{id:4,name:'三观问答',icon:'wenda'},
					{id:5,name:'爱情语录',icon:'jilu'},
					{id:6,name:'专属月老',icon:'robot-img'},
					{id:7,name:'隐私设置',icon:'shezhi'},
					{id:8,name:'用户协议',icon:'yonghuxieyi'},
					{id:9,name:'防骗提醒',icon:'jinggao'},
				],
				myAvatar:'',
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res)=> { // res - 各种参数
					this.swiperHeight = res.windowHeight - 90
				}
			});
		},
		methods: {
			jump(item){
				let index = item.id
				switch(index){
					case 3:
						uni.navigateTo({
							url:'/pages/my/watchWho'
						})
						break;
				}
				

			},
			confirmVerify(val){
				switch(val){
					case 0:
						uni.navigateTo({
							url:"/mysub/identitycard/index"
						})
						break;
				}
			
			},
			go(index){
				switch(index){
					case 0:
						uni.navigateTo({
							url:'/pages/editInfo/index'
						})
						break;
					case 1:
						uni.navigateTo({
							url:'/pages/mateSelection/index'
						})
						break;
					case 3:
						uni.navigateTo({
							url:'/mysub/myphoto/index'
						})
						break;
					case 8:
						uni.navigateTo({
							url:'/pages/my/serve'
						})
						break;
					case 9:
						uni.navigateTo({
							url:'/pages/my/warning'
						})
						break;
				}
				

			},
			uploadImg(){
				const _this = this;
				uni.chooseImage({
					count:1,	
					success(res){
						console.log(res,'=========上传')
						_this.myAvatar = res.tempFilePaths[0]
					},
					fail(res){
						uni.show({title:res.msg})
					},
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@mixin flexC{
	display: flex;
	align-items: center;
	justify-content: center;
}
.my{
	background-color: #f7f7f7;
	padding:20rpx 30rpx;

}
.my_top{
	display: flex;
	align-items: center;
	background: linear-gradient(180deg, #D8EAFF 0%, rgba(225, 239, 255, 0.64) 27%, rgba(235, 244, 255, 0.23) 62%, rgba(216, 234, 255, 0) 100%);
	.my_avatar{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #79a6e48f;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		overflow: hidden;
		.my_avatar_icon{
			width: 100%;
			height: 100%;
		}
		.my_icon_camera{
			margin-top: 22rpx;
			font-size: 54rpx;
			color: #fff;
		}
		.upload_img{
			margin-top: 10rpx;
			height: 36rpx;
			width: 100%;
			background-color: rgba(0,0,0,0.5);
			color: #fff;
			font-size: 16rpx;
			@include flexC;
		}
	}
	.my_reg{
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		.regist{
			color: #000;
			font-size: 30rpx;
		}
		.regist_sb{
			margin-top: 16rpx;
			color: #ccc;
			font-size: 24rpx;
		}
	}
}
.my_info{
	margin-top: 20rpx;
	display: flex;
	justify-content: space-evenly;
	.my_info_item{
		@include flexC;
		flex-direction: column;
		.info_num{
			font-size: 40rpx;
			color: #000;
			font-weight: 600;
		}
		.info_text{
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #ccc;
		}
	}
}
.open_vip{
	margin-top: 50rpx;
	border-radius: 10rpx;
	padding:40rpx;
	background-color: #131227;
	@include flexC();
	justify-content: space-between;
	.open_vip_tip{
		.vip_tips{
			color: #fff;
			font-size: 50rpx;
			margin-bottom: 10rpx;
		}
		
		.vip_tips_sub{
			font-size: 28rpx;
			color: #fff;
		}
	}
	.vip_btn{
		margin-left: 40rpx;
		background-color: #F5D392;
		width: 120rpx;
		height: 120rpx;
		border: 10rpx solid #686362;
		border-radius: 50%;
		@include flexC();
	}
}
.info_verify{
	margin-top: 40rpx;
	padding:30rpx;
	background-color: #fff;
	border-radius: 15rpx;
	.verify_title{
		font-size: 30rpx;
		color: #000;
		margin-bottom: 30rpx;
	}
	.verify_list{
		@include flexC();
		justify-content: space-around;
	
		.verify_item{
			@include flexC();
			flex-direction: column;
			.verify_icon{
				width: 80rpx;
				height: 80rpx;
				border-radius: 30rpx;
				background-color:#D6D6D6;
				@include flexC();
				.verify_iconfont_box{
					width: 50rpx;
					height: 40rpx;
					border-radius: 8rpx;
					background-color: #fff;
					@include flexC();
					.verify_iconfont{
						font-size: 30rpx;
						color: #D6D6D6;
					}
				}
				

			}
			.verify_name{
				margin-top: 16rpx;
				font-size: 24rpx;
				columns: #ccc;
			}
		}
	}
}
.my_info_box{
	margin-top: 40rpx;
	background-color: #fff;
	border-radius: 15rpx;
	
	.info_item{
		display: flex;
		align-items: center;
		.info_item_mark{
			font-size: 40rpx;
			margin-left: 30rpx;
		}
		.info_item_main{
			width: 100%;
			box-sizing: border-box;
			padding-right: 30rpx;
			height: 90rpx;
			margin-left: 20rpx;
			border-bottom:1px solid #eee;
			font-size:24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:last-child{
				border-bottom: 0;
			}
			.info_item_txt{
				color: #000;
			}
			.iconfont{
				color: #ccc;
			}
		}
	}
}
.my_wish{
	@include flexC();
	font-size: 24rpx;
	color:#ccc;
	height: 100rpx;
}
</style>
